<template>
    <el-dialog :title="cpShowTitle" :visible.sync="dialogVisible" :close-on-click-modal="false" @close="onClose">
        <h4>选择接收人：</h4>
        <el-row type="flex" justify="center">
            <el-transfer filterable filter-placeholder="输入来搜索" v-model="selectedMailUsers" :data="mailUsers"
                :titles="['全部收件人', '已选收件人']">
                <!-- <el-button class="transfer-footer" type="success" plain slot="left-footer" size="mini"
                    @click="getMailUsers">刷新</el-button> -->
                <!-- <el-button class="transfer-footer" type="primary" plain slot="right-footer" size="mini"
                    @click="selectedMailUsers=[]">清空</el-button> -->
            </el-transfer>
        </el-row>
        <h4>选项：</h4>
        <el-row type="flex" justify="left" style="margin-top: 5px;">
            <el-col :span="16" :offset="4">
                标题：<el-input v-model="form.title" placeholder="邮件标题"></el-input>
            </el-col>
        </el-row>
        <el-row type="flex" justify="left" style="margin-top: 5px;">
            <el-col :span="16" :offset="4">
                备注：<el-input placeholder="邮件备注" v-model="form.content">
                </el-input>
            </el-col>
        </el-row>
        <el-row type="flex" justify="left" style="margin-top: 5px;">
            <el-col :span="16" :offset="4">
                文件处理方式：<el-switch v-model="form.isCompress" active-text="压缩" inactive-text="不压缩" />
            </el-col>
        </el-row>
        <div style="width:100%;text-align: center;margin-top: 5px;">
            <el-button type="primary" @click="onSubmit">发送</el-button>
            <el-button @click="onClose">取消</el-button>
        </div>
    </el-dialog>
</template>

<script>
import request from '@/utils/request'

export default {
    props: {
        visible: {
            type: Boolean,
            default: false
        },
        sendList: {
            type: Array,
            default: () => []
        }
    }
    , components: {
    }
    , data() {
        return {
            dialogVisible: this.visible
            , sendDataList: []
            , okDisabled: false
            , cancelDisabled: false
            , cancelText: '取消'
            ,selectedMailUsers:[]
            ,mailUsers:[]
            ,form:{
                isCompress:false
                ,title:''
                ,content:''
                , receiverIds:[]
                , fileIds:[]
            }
        }
    }
    , mounted() {
        this.dialogVisible = this.visible;
        this.sendDataList = JSON.parse(JSON.stringify(this.sendList));
        this.getMailUsers();
        let len = this.sendDataList.length;
        this.form.title = `分享${len}个文件到供应商`;
        this.form.content = len > 1 ? `文件分享：分享 ${this.sendDataList[0].originalName}等，共${len}个文件`
            :`文件分享：${this.sendDataList[0].originalName}`;
        for(let it of this.sendDataList){
            this.form.fileIds.push(it.id);
        }
    }
    , methods: {
        onClose() {
            this.dialogVisible = false;
            this.$emit('close',this.sendDataList.length>1);
        }
        , onSubmit(){
            if (this.selectedMailUsers.length === 0){
                this.$modal.msgWarning("请选择至少1个收件人。");
                return;
            }
            if (this.selectedMailUsers.length > 10){
                this.$modal.msgWarning("收件人一次不能超过10个。");
                return;
            }
            this.$modal.confirm(`是否确认发送${this.sendDataList.length}个文件给选中的${this.selectedMailUsers.length}个收件人？文件发送后将不能撤回。`)
            .then(() => {
                return request({
                    url: '/file-share/send'
                , method: 'post'
                , data: this.form 
                })
            })
            .then(res=>{
                console.log(res);
                
                if(res&&res.code===200){
                    this.$modal.msgSuccess("发送成功。");
                    this.onClose(); 
                }else{
                    this.$modal.msgError(res.msg);
                }
            })
            .catch(err=>{
                console.log(err); 
            })
        }
        ,getMailUsers(){
            request({
                url: '/file-share/list-receiver'
               , method: 'get'
            })
            .then(res=>{
                this.mailUsers = [];
                this.selectedMailUsers = [];
                if(res.data&&res.data.length!==0){
                    for(let it of res.data){
                        this.mailUsers.push({
                            key:it.id,
                            label: it.account +'-'+it.email,
                            ...it
                        })
                    }
                }
            })
            .catch(err=>console.log(err))
        }
    }
    ,computed: {
        // 计算属性cpShowTitle
       cpShowTitle() {
        if(this.sendDataList.length === 1){
            return '分享文件：'+this.sendDataList[0].originalName+'给下列收件人：';
        }else{
            return `分享${this.sendDataList.length}个文件给下列收件人：`;
        }
       } 
    }
    ,watch: {
        selectedMailUsers(val) {
            this.form.receiverIds = [];
            for(let it of val){
                this.form.receiverIds.push(it);
            }
        }
    }

}
</script>

<style>
#content-box{
    width: 100%;
}
.el-transfer-panel{
    width:300px !important;
}
</style>